<template>
	<div id="app">
		<workflow-base-vue ref="workFlow" v-if="nodeList.next && Object.keys(nodeList.next).length" :treeData="nodeList"
			:rootNodeID="nodeList[config.next][config.nodeId]" :lastNodeID="'20220415132226A017'" :config="config"
			:showItem="showItem" :statusANDcolorConfig="statusANDcolorConfig" :handleClick="nodeClickFn"
			:hasSlot="true">
			<!-- 插入节点 -->
			<template slot="node" slot-scope="item">
				<div class="node-in">
					<div>
						<p>{{ item.nodeDesc }}</p>
						<p>{{ item.stime }}</p>
					</div>
					<div>
						<p>{{item.etime }}</p>
						<div>
							<span style="margin-right: 5px">{{ item.opt }}</span>
							<i :class="`${
                  statusANDcolorConfig.find(
                    (sitem) => sitem.value === item[config.status]
                  ) &&
                  statusANDcolorConfig.find(
                    (sitem) => sitem.value === item.status
                  ).icon
                }`" :style="
                  item.status && item.status === 'isPass'
                    ? 'color:#67c23a '
                    : item.status === 'noPass'
                    ? 'color:lightcoral'
                    : 'color:#cbc9c9'
                "></i>
						</div>
					</div>
				</div>
			</template>
		</workflow-base-vue>
	</div>
</template>

<script>
	import workflowBaseVue from "../packages/workflowBaseVue.vue";
	export default {
		name: "app",
		components: {
			workflowBaseVue,
		},
		methods: {
			nodeClickFn(item) {
				console.log(item, "item")
			}
		},
		data() {
			return {
				nodeList: {
					nodeId: 0,
					next: {},
					nexts: []
				}, //根节点。不对应节点实体。必须得有。

				config: {
					nodeId: "taskId", //节点id,唯一 Number or String
					nodeTitle: "nodeTitle", //节点名称 String
					status: "state", //节点状态 Number or String
					nodeDesc: "activityName", //节点处理文案 String
					opt: "userName", //操作人或是角色 String
					stime: "inDate", //开始时间 String
					etime: "outDate", //结束时间 String
					nexts: "nexts", //枝杈节点 Array
					next: "next",
				},
				showItem: ["nodeDesc"],
				statusANDcolorConfig: [{
						value: "1", //已处理-绿色
						bgcolor: "#d5f5d7",
						bdcolor: "#d5f5d7",
						icon: "el-icon-circle-check",
						iconcolor: "#67c23a",
					},
					{
						value: "0", //待处理-黄色
						bgcolor: "#f9d9ac",
						bdcolor: "#ffe39f",
						icon: "el-icon-circle-close",
						iconcolor: "coral",
					},
					{
						value: "watting",
						bgcolor: "#a8e9f8",
						bdcolor: "#a8e9f8",
						icon: "el-icon-loading",
						iconcolor: "#a8e9f8",
					},
					{
						value: "9", //注销-灰色
						bgcolor: "#cbc9c9",
						bdcolor: "#cbc9c9",
						icon: "el-icon-warning-outline",
						iconcolor: "#cbc9c9",
					},
				],
			};
		},
		created() {
			let jsonData = {
				"taskId": "20220415132224A010",
				"activityName": "登记",
				"userName": "cs13580",
				"inDate": "2022-04-15 13:22:24",
				"outDate": "2022-04-15 13:22:25",
				"state": "1",
				"nexts": [],
				"next": {
					"taskId": "20220415132224A011",
					"activityName": "立案",
					"userName": "cs13580",
					"inDate": "2022-04-15 13:22:26",
					"outDate": "2022-04-15 13:39:47",
					"state": "1",
					"nexts": [],
					"next": {
						"taskId": "20220415132226A017",
						"activityName": "会商",
						"userName": null,
						"inDate": "2022-04-15 13:39:46",
						"outDate": null,
						"state": "0",
						"nexts": [],
						"next": {}
					}
				}
			}

			this.nodeList = {
				nodeId: 0,
				nodeTitle: "",
				next: jsonData,
				nexts: []
			}; //包一层根节点，和对象的原型顶层是null 一个道理。
		},
	};
</script>
